<template>
  <div class="flowchart-box">
    <IframeContainer  :iframeUrl="projectUrl" ref="refIframeContainer"
                     @iframe_receive_data="handleDataReceive" @iframe_loaded="loadData"></IframeContainer>

  
  </div>
</template>

<script>
import CardBox from "@/components/Custom/CardBox.vue";
import IframeContainer from "@/components/Custom/IframeContainer.vue";
//import {getGateValveRealtimeDataByGwsn} from "@/api/dygq/varRealtimeData"

const topologyUrl = process.env.VUE_APP_TOPOLOGY_BASE_URL

export default {
  name: "flowchart_v2",
  components: {CardBox, IframeContainer},
  props: {
    projectId: {
      type: Number,
      default: 0
    },
    gwsn: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      baseURL: topologyUrl
    }
  },
  computed: {
    projectUrl() {
      debugger
       console.log('#####'+ this.baseURL + 'topologyPreview?project_id=' + this.projectId + '&gwsn=' + this.gwsn)
      return this.baseURL + 'topologyPreview?project_id=25'
    }
  },
  methods: {
    handleDataReceive(data) {
      this.$emit('update_flowchart_data', data)
    },
    loadData() {
      const that = this
      // getGateValveRealtimeDataByGwsn(that.gwsn, (res) => {
      //   if (res.code === 200) {
      //     that.$nextTick(() => {
      //       that.$refs.refIframeContainer.triggerIframeEvent(res.data)
      //     })
      //     that.$emit('update_flowchart_data', {
      //       source: 'topology_' + that.gwsn + '_' + that.projectId,
      //       dataTime: res.data[0].dataTime
      //     })
      //   } else {
      //     that.$message.error(res.msg)
      //   }
      // })
    },
  },
  mounted() {
    // this.loadData()
  }
}
</script>

<style scoped lang="scss">
.flowchart-box {
  width: calc(100% - 40px);
  height: calc(100% - 180px);
  position: fixed;
  top: 150px;
  margin: 10px 20px 20px;
  background-color: #242e34;
  display: flex;
  justify-content: space-between;

  .no-data {
    width: 100%;
    height: 100%;
    color: #FFFFFF;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #424656;
    border-radius: 4px;
  }
}
</style>
